<template>
  <div class="content" ref="content">
    <div class="tabs">
      <div @click="quit" class="noDrag">
        <a-icon type="logout" />
      </div>
    </div>
    <div class="noDrag">
      <a-tabs default-active-key="1">
        <a-tab-pane
          :tab="`${item.path[0]}盘`"
          v-for="(item, index) in libraryfolders"
          :key="index"
        >
          <div
            v-for="items in item.apps"
            :key="items.id"
            style="position: relative"
          >
            <a-card
              style="width: 230px; height: 180px; position: relative;z-index:8;background-color: rgba(0, 0, 0, 0);"
              size="small"
            >
              <div slot="title" class="title">
                <img
                  :src="`${url}\\appcache\\librarycache\\${items.appid}_icon.jpg`"
                  width="32px"
                  height="32px"
                  alt=""
                  srcset=""
                />
                {{ items.name ? items.name : "暂无" }}
              </div>
              <p>占用空间：{{ getSizeOnDisk(items.SizeOnDisk) }}G</p>
              <p>更新时间：{{ getTime(items.LastUpdated) }}</p>
              <a :href="`steam://run/${items.appid}`" class="btn">启动</a>
            </a-card>
            <img
              class="_header"
              :src="`${url}\\appcache\\librarycache\\${items.appid}_header.jpg`"
              alt=""
              srcset=""
              width="230px"
              height="130px"
            />
          </div> </a-tab-pane
      ></a-tabs>
    </div>

    <!-- <a-button type="primary" @click="test">newWindow</a-button>
    <a-button type="primary" @click="test1">点击</a-button> -->
    <a-drawer
      class="noDrag"
      title="账号管理"
      placement="bottom"
      :closable="false"
      :visible="getShow"
      :after-visible-change="afterVisibleChange"
      @close="onClose"
      :maskStyle="{
        backgroundColor: 'rgba(0,0,0,0)',
      }"
      :height="300"
    >
      <div class="boxLeft">
        <box-left ref="left" @getTnfo="getTnfo" />
      </div>
      <div class="boxRight">
        <box-right ref="right" @edit="edit" />
      </div>
    </a-drawer>
  </div>
</template>

<script>
import BoxLeft from "@/views/boxLeft/BoxLeft.vue";
import BoxRight from "@/views/boxRight/BoxRight.vue";
// const request = require("request");
// const cheerio = require("cheerio");
let win = null;
function creatWindow(slef) {
  win = new slef.remote.BrowserWindow({
    width: 500,
    height: 500,
  });
  win.loadURL("https://steamdb.info/");

  // win.webContents.on("did-finish-load", function () {
  //   setTimeout(() => {
  //     win.webContents.executeJavaScript(``);
  //     let div = document.querySelector(".login_btn");
  //     div.onclick = function () {
  //       console.log("登录");
  //     };
  //   }, 2000);
  // });
}
export default {
  name: "index",
  components: {
    BoxLeft,
    BoxRight,
  },
  data() {
    return {
      data: [],
      libraryfolders: [],
    };
  },
  computed: {
    getShow() {
      return this.$store.state.show;
    },
    getSizeOnDisk() {
      return function (size) {
        return (size / Math.pow(1024, 3)).toFixed(2);
      };
    },
    getTime() {
      return function (t) {
        let date = new Date(t * 1000);
        let YY = date.getFullYear() + "-";
        let MM =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "-";
        let DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        let hh =
          (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
          ":";
        let mm =
          (date.getMinutes() < 10
            ? "0" + date.getMinutes()
            : date.getMinutes()) + ":";
        let ss =
          date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        return YY + MM + DD + " " + hh + mm + ss;
      };
    },
  },
  created() {
    this.getApps();
  },
  methods: {
    // https://store.steampowered.com/search/suggest?term=550&f=games&cc=HK
    // getGameInfo(i, item, index) {
    //   let that = this;
    //   console.log(i);
    //   request(
    //     `https://store.steampowered.com/search/suggest?term=${item.appid}&f=games&cc=CN`,
    //     function (error, response, body) {
    //       let $ = cheerio.load(body);
    //       let arr = $(".ds_collapse_flag");
    //       if (arr.length) {
    //         arr[0].children.forEach((tag, num) => {
    //           switch (num) {
    //             case 0:
    //               item["name2"] = tag.lastChild ? tag.lastChild.data : "";
    //               break;
    //             case 1:
    //               item["avatar"] = tag.lastChild.src
    //                 ? tag.lastChild.attribs.src
    //                 : "";
    //               break;
    //             case 2:
    //               item["price"] = tag.lastChild ? tag.lastChild.data : "";
    //               break;
    //           }
    //         });
    //       } else {
    //         item["name2"] = "";
    //         item["avatar"] = "";
    //         item["price"] = "";
    //       }
    //       if (
    //         index === that.libraryfolders.length - 1 &&
    //         i === that.libraryfolders[index].apps.length - 1
    //       ) {
    //         that.readFile((data) => {
    //           console.log(data, "============");
    //           data.libraryfolders = that.libraryfolders;
    //           that.writeFile({ ...data });
    //         });
    //       }
    //     }
    //   );
    // },
    getApps() {
      this.readFile((data) => {
        if (data.libraryfolders) {
          this.$set(this, "libraryfolders", data.libraryfolders);
        } else {
          setTimeout(() => {
            this.getApps();
          }, 2000);
        }
      });
    },
    edit(data) {
      this.$refs.left.formInline = data;
    },
    getTnfo() {
      this.$refs.right.getUser();
    },
    afterVisibleChange(val) {
      console.log("visible", val);
    },
    showDrawer() {
      this.visible = true;
    },
    onClose() {
      this.$store.commit("increment");
    },
    test1() {
      this.fs.writeFile("./test.txt", "hello world!", function (err) {
        if (err) {
          return console.log(err);
        }
        console.log("The file was saved!");
      });
      // this.session.defaultSession.cookies
      //   .get({})
      //   .then((cookies) => {
      //     console.log(cookies);
      //   })
      //   .catch((error) => {
      //     console.log(error);
      //   });
    },
    test() {
      creatWindow(this);
      win.webContents.openDevTools();
    },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
    quit() {
      this.app.exit();
    },
  },
};
</script>
<style lang="less" scoped>
.title {
  > img {
    border-radius: 50%;
  }
}
::v-deep .ant-card-body{
  background-color: rgba(0,0,0,0);
  color: rgb(194, 184, 184);
}
._header {
  position: absolute;
  top: 50px;
  left: 0;
}
.ant-tabs-tabpane {
  height: 465px;
  padding: 15px;
  display: flex;
  flex-wrap: wrap;
  overflow-y: overlay;
  > div {
    margin: 5px;
   
  }
}
.btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.content {
  width: 100%;
  height: 90vh;
  background-color: #ffffff;
  margin-top: 10vh;
  border-radius: 4px;
  overflow: hidden;
  .tabs {
    height: 30px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    > div {
      height: 30px;
      width: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      > i {
        font-size: 20px;
      }
    }
    > div:hover {
      background-color: #ff0000;
      color: #ffffff;
    }
    border-bottom: 1px solid #e5e5e5;
    box-shadow: 0px 0px 10px #888888;
  }
}
::v-deep .ant-drawer-body {
  padding: 0;
  display: flex;
}
.boxRight,
.boxLeft {
  width: 50%;
  height: 245px;
}
.boxLeft {
  padding: 20px;
}
.boxRight {
  background-color: #ffffff;
  padding: 23px 20px;
}
</style>
